{% extends "catalog/base_generic.html" %}

{% block title %}我的借阅{% endblock %}

{% block content %}
<h1 class="page-header">
    <i class="fas fa-bookmark me-2"></i>我的借阅
</h1>

<div class="table-responsive">
    <table class="table table-hover">
        <thead>
            <tr>
                <th>图书</th>
                <th>版本信息</th>
                <th>应还日期</th>
                <th>状态</th>
            </tr>
        </thead>
        <tbody>
            {% for instance in object_list %}
            <tr>
                <td>
                    <a href="{{ instance.book.get_absolute_url }}">{{ instance.book.title }}</a>
                </td>
                <td>{{ instance.imprint }}</td>
                <td>{{ instance.due_back|date:"Y-m-d" }}</td>
                <td>
                    {% if instance.is_overdue %}
                    <span class="badge bg-danger">已逾期</span>
                    {% else %}
                    <span class="badge bg-success">借阅中</span>
                    {% endif %}
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="4" class="text-center">暂无借阅记录</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% if is_paginated %}
<nav aria-label="分页导航" class="mt-4">
    <ul class="pagination justify-content-center">
        {% if page_obj.has_previous %}
        <li class="page-item">
            <a class="page-link" href="?page={{ page_obj.previous_page_number }}">
                <i class="fas fa-chevron-left"></i>
            </a>
        </li>
        {% endif %}
        {% for i in paginator.page_range %}
        <li class="page-item {% if page_obj.number == i %}active{% endif %}">
            <a class="page-link" href="?page={{ i }}">{{ i }}</a>
        </li>
        {% endfor %}
        {% if page_obj.has_next %}
        <li class="page-item">
            <a class="page-link" href="?page={{ page_obj.next_page_number }}">
                <i class="fas fa-chevron-right"></i>
            </a>
        </li>
        {% endif %}
    </ul>
</nav>
{% endif %}
{% endblock %} 